<template>
	<view class="home">
		<u-navbar title="浮标法测流" :leftIconSize="24" bgColor="#f2f1f6" rightIcon="question-circle" :autoBack="true"
			:placeholder="true" safeAreaInsetTop>
			<view class="u-nav-slot" slot="right">
				<!-- <u-icon name="order" color="#000" size="28"></u-icon> -->
			</view>
		</u-navbar>
		<mescroll-body @init="mescrollInit" @up="upCallback" :down="downOption" @down="downCallback" :up="upOption">
			<view class="devitem">
				<!-- 水文监测卡片列表 -->
				<view class="card-list">
					<!-- 单个卡片 - 可循环渲染 -->
					<view class="hydro-card" v-for="(item, index) in dataList" :key="index" @click="onCardClick(item)">
						<!-- 卡片头部 -->
						<view class="card-header">
							<text class="card-title">{{ item.gspName }}</text>
							<text class="card-time">{{item.createTime}}</text>
						</view>
						<!-- 数据分隔线 -->
						<view class="divider"></view>
						<!-- 数据指标 -->
						<view class="data-grid">
							<!-- 第一行指标 -->
							<u-row>
								<u-col span="6">
									<view class="text">
										水深：{{item.depthofwater}}
									</view>
								</u-col>
								<u-col span="6">
									<view class="text">
										测长：{{item.lengthmeasurement}}
									</view>
								</u-col>
							</u-row>
							<!-- 第二行指标 -->
							<u-row>
								<u-col span="6">
									<view class="text">
										用时：{{item.taketime}}
									</view>
								</u-col>
								<u-col span="6">
									<view class="text">
										浮标系数：{{item.coefficient}}
									</view>
								</u-col>
							</u-row>
							<!-- 第三行指标 -->
							<view class="texta">
								流量：{{ item.flowrate }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import dayjs from '@/common/dayjs.min.js';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				titleStyle: {
					color: '#000000',
					fontSize: '40rpx'
				},
				upOption: {
					page: {
						num: 0,
						size: 20 // 每页数据的数量,默认10
					},
					noMoreSize: 2,
					empty: {
						tip: '暂无相关数据'
					}
				},
				downOption: {},
				dataList: [],
			}
		},
		onShow() {
			this.dataList = []
		},
		onLoad(option) {

		},
		methods: {
			onCardClick(i) {
				console.log('i', i);
			},
			// 人工测报
			devitFn(i) {
				console.log('i', i);
			},
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				uni.$u.http.get('/device/floatingCurrentRecording/list', {
					params: {
						pageSize: pageSize,
						pageNum: pageNum,
					}
				}).then(res => {
					console.log('res', res);
					if (res.code == 200) {
						// 接口返回的当前页数据列表 (数组)
						let curPageData = res.rows;
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length;
						// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
						// let totalPage = data.total;
						// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
						let totalSize = res.total;
						// 接口返回的是否有下一页 (true/false)

						// 处理全显示
						// if(this.ssId == null){
						// 	return
						// }
						//设置列表数据
						if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
						this.dataList = this.dataList.concat(curPageData); //追加新数据
						console.log('列表', res);
						//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
						this.mescroll.endBySize(curPageLen, totalSize);
					} else {
						uni.showToast({
							title: '暂无数据',
							duration: 1500
						});
					}
				}).catch(err => {
					console.log('err', err);
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				})
			},
			// 相对时间
			relativeTime(date) {
				const dateToCheck = dayjs(date.TIM);
				// 获取今天的日期
				const today = dayjs().format('YYYY-MM-DD HH:mm');
				// 计算dateToCheck距离今天的天数差异
				const daysDifference = dateToCheck.diff(today, 'day');
				// 如果你想要一个绝对值（不考虑正负），可以使用Math.abs
				const absoluteDaysDifference = Math.abs(daysDifference);
				return absoluteDaysDifference
			},
			// 下拉刷新
			downCallback() {
				this.dataList = []
				this.mescroll.resetUpScroll();
			},
			/*若希望重新加载列表,只需调用此方法即可(内部会自动page.num=1,再主动触发up.callback)*/
			reloadList() {
				this.mescroll.resetUpScroll();
			}
		}
	}
</script>
<style scoped lang="scss">
	.home {
		.devitem {

			// padding: 30rpx;
			// border-radius: 30rpx;
			.devitem_flx {
				margin: 20rpx;
				padding: 20rpx;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				// border: 1rpx solid #000000;
				background-color: rgba(255, 255, 255, 0.9);

				.flx_cob {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.tubi {
						width: 10rpx;
						height: 40rpx;
						border-radius: 30rpx;
						margin-right: 20rpx;
						background-color: #5275a8;
					}

					.textt {
						font-size: 45rpx;
						color: #000000;

						.texbb {
							font-size: 35rpx;
							color: #646464;
						}
					}
				}

				.yuansfla {
					font-size: 60rpx;
					color: #7098da;
				}

			}
		}
	}
</style>
<!-- 卡片 -->
<style lang="scss" scoped>
	.card-list {}

	.hydro-card {
		background-color: #FFFFFF;
		border-radius: 24rpx;
		padding: 20rpx;
		margin: 20rpx;
		box-shadow:
			0 4rpx 12rpx rgba(0, 0, 0, 0.05),
			0 1rpx 3rpx rgba(0, 0, 0, 0.08);
		transition: transform 0.2s ease;

		&:active {
			transform: scale(0.98);
		}
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// margin-bottom: 20rpx;
	}

	.card-title {
		font-size: 36rpx;
		color: #5885ff;
		font-weight: 600;
		letter-spacing: -0.5rpx;
	}

	.card-time {
		// font-weight: 400;
	}

	.divider {
		height: 1rpx;
		background-color: rgba(0, 0, 0, 0.08);
		// margin: 24rpx 0;
	}

	.data-grid {

		// display: grid;
		// grid-template-columns: repeat(2, 1fr);
		// gap: 24rpx;
		.text {
			font-size: 45rpx;
			color: #1C1C1E;
		}

		.texta {
			font-size: 45rpx;
			color: #1C1C1E;
			// text-align: center;

		}
	}
</style>
<style>
	@font-face {
		font-family: 'MyFont';
		src: url('@/static/fonts/LED.otf');
	}

	page {
		background-color: #f2f1f6;
	}
</style>